<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高级交互式日历</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #2196F3;
            --secondary-color: #FF9800;
            --bg-color: #ffffff;
            --text-color: #333333;
            --empty-day-color: #999999;
            --hover-color: #f0f0f0;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Segoe UI', system-ui;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .calendar-container {
            background: var(--bg-color);
            border-radius: 20px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
            padding: 2rem;
            width: 90%;
            max-width: 800px;
            position: relative;
            overflow: hidden;
        }

        .calendar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
        }

        .month-year {
            font-size: 2rem;
            color: var(--primary-color);
            font-weight: 600;
        }

        .nav-buttons button {
            background: var(--primary-color);
            border: none;
            color: white;
            padding: 0.8rem 1.2rem;
            border-radius: 10px;
            cursor: pointer;
            transition: transform 0.2s;
        }

        .nav-buttons button:hover {
            transform: scale(1.05);
        }

        .calendar-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 5px;
            margin-bottom: 1rem;
        }

        .calendar-day {
            padding: 1rem;
            text-align: center;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
            background: transparent;
            border: 1px solid transparent;
        }

        .calendar-day:hover {
            background: var(--hover-color);
        }

        .calendar-day.today {
            background: var(--secondary-color);
            color: white;
            font-weight: bold;
        }

        .calendar-day.empty {
            color: var(--empty-day-color);
            cursor: default;
        }

        .calendar-day.empty:hover {
            background: transparent;
        }

        .calendar-day.selected {
            border: 2px solid var(--primary-color);
            box-sizing: border-box;
        }

        .weekday-header {
            font-weight: bold;
            text-align: center;
            padding: 0.5rem;
        }

        @media (max-width: 600px) {
            .calendar-container {
                padding: 1rem;
            }
            
            .month-year {
                font-size: 1.5rem;
            }
        }
    </style>
</head>
<body>
    <div class="calendar-container">
        <div class="calendar-header">
            <div class="month-year" id="monthYear"></div>
            <div class="nav-buttons">
                <button onclick="changeMonth(-1)"><i class="fas fa-chevron-left"></i></button>
                <button onclick="changeMonth(1)"><i class="fas fa-chevron-right"></i></button>
            </div>
        </div>

        <div class="calendar-grid" id="calendarGrid"></div>
    </div>

    <script>
        let currentDate = new Date();
        let selectedDate = null;

        function generateCalendar() {
            const calendarGrid = document.getElementById('calendarGrid');
            calendarGrid.innerHTML = '';
            
            const monthYear = document.getElementById('monthYear');
            const monthNames = ['一月', '二月', '三月', '四月', '五月', '六月', 
                              '七月', '八月', '九月', '十月', '十一月', '十二月'];
            
            monthYear.textContent = `${monthNames[currentDate.getMonth()]} ${currentDate.getFullYear()}`;

            const firstDay = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
            const lastDay = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
            const daysInMonth = lastDay.getDate();
            const startingDay = firstDay.getDay();
            
            // 生成星期标题
            const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
            for (let i = 0; i < weekdays.length; i++) {
                const weekdayElement = document.createElement('div');
                weekdayElement.className = 'weekday-header';
                weekdayElement.textContent = weekdays[i];
                calendarGrid.appendChild(weekdayElement);
            }

            // 获取上个月的最后几天
            const prevMonthLastDay = new Date(currentDate.getFullYear(), currentDate.getMonth(), 0).getDate();
            
            // 生成上个月的末尾几天（灰色显示）
            for (let i = 0; i < startingDay; i++) {
                const day = prevMonthLastDay - startingDay + i + 1;
                const dayElement = document.createElement('div');
                dayElement.className = 'calendar-day empty';
                dayElement.textContent = day;
                calendarGrid.appendChild(dayElement);
            }

            // 生成当前月的日期
            for (let day = 1; day <= daysInMonth; day++) {
                const date = new Date(currentDate.getFullYear(), currentDate.getMonth(), day);
                const dayElement = document.createElement('div');
                dayElement.className = 'calendar-day';
                dayElement.textContent = day;
                
                if (isToday(date)) {
                    dayElement.classList.add('today');
                }
                
                if (selectedDate && isSameDate(date, selectedDate)) {
                    dayElement.classList.add('selected');
                }
                
                dayElement.onclick = () => selectDate(date);
                
                calendarGrid.appendChild(dayElement);
            }

            // 计算需要补充的下个月日期数量
            const totalCells = startingDay + daysInMonth;
            const remainingCells = totalCells % 7 === 0 ? 0 : 7 - (totalCells % 7);
            
            // 生成下个月的开始几天（灰色显示）
            for (let i = 1; i <= remainingCells; i++) {
                const dayElement = document.createElement('div');
                dayElement.className = 'calendar-day empty';
                dayElement.textContent = i;
                calendarGrid.appendChild(dayElement);
            }
        }

        function changeMonth(offset) {
            currentDate.setMonth(currentDate.getMonth() + offset);
            generateCalendar();
        }

        function selectDate(date) {
            selectedDate = date;
            
            // 如果选择的日期不在当前显示的月份，切换到那个月份
            if (date.getMonth() !== currentDate.getMonth() || 
                date.getFullYear() !== currentDate.getFullYear()) {
                currentDate = new Date(date);
                generateCalendar();
            } else {
                // 只是更新选中状态
                const days = document.querySelectorAll('.calendar-day:not(.empty)');
                days.forEach(day => {
                    day.classList.remove('selected');
                });
                
                const selectedDay = Array.from(days).find(day => 
                    parseInt(day.textContent) === date.getDate());
                if (selectedDay) {
                    selectedDay.classList.add('selected');
                }
            }
        }

        function isToday(date) {
            const today = new Date();
            return date.getDate() === today.getDate() && 
                   date.getMonth() === today.getMonth() && 
                   date.getFullYear() === today.getFullYear();
        }

        function isSameDate(date1, date2) {
            return date1.getDate() === date2.getDate() && 
                   date1.getMonth() === date2.getMonth() && 
                   date1.getFullYear() === date2.getFullYear();
        }

        // 初始化
        generateCalendar();
    </script>
</body>
</html>